<template>
  <el-container>
    <!-- 顶部导航栏，始终显示 -->
    <el-header>
      <div class="header-content">
        <span class="page-title">交通运输人员就业与再就业教育培训平台</span>
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            用户
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="viewProfile">个人信息</el-dropdown-item>
              <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

      <!-- 顶部菜单，设置为水平排列 -->
      <el-menu :default-active="activeMenu" class="el-menu-demo" mode="horizontal" @select="handleMenuSelect">
        <el-menu-item index="1">培训计划</el-menu-item>
        <el-menu-item index="2">课程学习</el-menu-item>
        <el-menu-item index="3">我的考试</el-menu-item>
      </el-menu>
    </el-header>

    <!-- 个人信息查看对话框 -->
    <el-dialog v-model="isViewDialogVisible" title="查看个人信息" width="500px">
      <el-form :model="userInfo" label-width="100px">
        <el-form-item label="编号">
          <span>{{ userInfo.id }}</span>
        </el-form-item>
        <el-form-item label="姓名">
          <span>{{ userInfo.name }}</span>
        </el-form-item>
        <el-form-item label="手机号">
          <span>{{ userInfo.phone }}</span>
        </el-form-item>
        <el-form-item label="邮箱">
          <span>{{ userInfo.email }}</span>
        </el-form-item>
        <el-form-item label="地址">
          <span>{{ userInfo.address }}</span>
        </el-form-item>
      </el-form>

      <!-- 操作按钮 -->
      <template #footer>
        <el-button @click="isViewDialogVisible = false">关闭</el-button>
        <el-button @click="openEditDialog" type="primary">编辑</el-button>
      </template>
    </el-dialog>

    <!-- 个人信息编辑对话框 -->
    <el-dialog v-model="isEditDialogVisible" title="编辑个人信息" width="500px">
      <el-form :model="editableUserInfo" label-width="100px">
        <el-form-item label="编号">
          <span>{{ editableUserInfo.id }}</span>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="editableUserInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="editableUserInfo.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="editableUserInfo.email"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="editableUserInfo.address"></el-input>
        </el-form-item>
      </el-form>

      <!-- 操作按钮 -->
      <template #footer>
        <el-button @click="isEditDialogVisible = false">取消</el-button>
        <el-button @click="saveChanges" type="primary">保存</el-button>
      </template>
    </el-dialog>

    <!-- 主要内容区域 -->
    <el-main>
      <div v-if="activeMenu === '1'">
        <TrainingPlan />
      </div>
      <div v-else-if="activeMenu === '2'">
       <MyTrainingPlan/>
      </div>
      <div v-else-if="activeMenu === '3'">
        <ExamRecord />
      </div>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

// 导入自定义组件
import TrainingPlan from "@/components/TrainingPlan.vue";  // 引入培训计划组件
import ExamRecord from "@/components/ExamRecord.vue";  // 引入考试记录组件
import MyTrainingPlan from "@/components/MyTrainingPlan.vue";
import axios from '@/utiles/axios';

// 响应式状态
const activeMenu = ref('1');
const isViewDialogVisible = ref(false);
const isEditDialogVisible = ref(false);  // 控制编辑对话框的显示
const userInfo = ref({
  id: '',
  name: '',
  phone: '',
  email: '',
  address: ''
});
const editableUserInfo = ref({ ...userInfo.value });  // 用于编辑的用户信息

const router = useRouter();  // 获取router实例

// 处理命令
const handleCommand = (command) => {
  if (command === 'viewProfile') {
    viewProfile();  // 调用查看个人信息的方法
  } else if (command === 'logout') {
    logout();  // 调用退出登录的方法
  }
};

// 选择菜单时触发的事件
const handleMenuSelect = (index) => {
  activeMenu.value = index;
  // 使用逻辑来控制显示的页面内容
  if (index === '1') {
    // 不使用路由跳转，直接显示组件内容
    // 可以选择使用动态组件渲染方法
  } else if (index === '2') {
    // 显示课程学习内容
  } else if (index === '3') {
    // 显示考试记录内容
  }
};

// 查看个人信息
const viewProfile = async () => {
  const id = localStorage.getItem('studentId');  // 获取当前学生ID
  if (!id) {
    console.error('学生ID不存在');
    ElMessage.error('无法获取学生ID');
    return;
  }
  try {
    // 请求个人信息
    const response = await axios.get(`/student/info?id=${id}`);
    userInfo.value = response.data;
    editableUserInfo.value = { ...response.data };  // 初始化编辑数据
    isViewDialogVisible.value = true;  // 显示查看对话框
  } catch (error) {
    console.error('获取个人信息失败', error);
    ElMessage.error('获取个人信息失败');
  }
};

// 打开编辑对话框
const openEditDialog = () => {
  isEditDialogVisible.value = true;
};

// 保存编辑后的信息
const saveChanges = async () => {
  const id = editableUserInfo.value.id;  // 获取学生 ID
  try {
    const response = await axios.put(`/student/edit`, editableUserInfo.value, {
      headers: {
        'Content-Type': 'application/json',
      },
    });
    ElMessage.success('个人信息更新成功');
    userInfo.value = { ...editableUserInfo.value };  // 更新用户信息
    isEditDialogVisible.value = false;  // 关闭编辑对话框
  } catch (error) {
    ElMessage.error('保存个人信息失败');
  }
};

// 退出登录
const logout = () => {
  localStorage.removeItem('token');
  localStorage.clear();
  sessionStorage.removeItem('token');
  router.push("/");
  ElMessage.success('退出登录成功');
};
</script>

<style scoped>
.el-dropdown {
  transition: opacity 0.3s ease; /* 只对opacity做过渡 */
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  font-size: 20px;
  font-weight: bold;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
}

.el-menu-demo {
  background-color: #f5f5f5;
}

.el-menu-item {
  font-size: 16px;
}
</style>
